<template>
  <backContainer>
    <card
      :title="typeText[type]"
      v-loading="loading"
    >
      <div class="contain">
        <div class="title">
          <ancestorsNameDeal max-length="60" :text="examInfo.title"></ancestorsNameDeal>
        </div>
        <div class="lines">
          <div class="line" v-if="examInfo.duration != -1">
            <div class="label">{{ typeText[type] }}时间</div>
            <div class="value">{{ examInfo.duration }} 分钟</div>
          </div>
          <div class="line">
            <div class="label">{{ typeText[type] }}总分</div>
            <div class="value">{{ examInfo.totalScore }} 分</div>
          </div>
          <!--   考核才有及格分     -->
          <div v-if="type == 1" class="line">
            <div class="label">及格分数</div>
            <div class="value">{{ examInfo.passingGrade }} 分</div>
          </div>
        </div>
        <div @click="startExam" class="sure_btn">
          开始{{ typeText[type] }}
        </div>
        <div class="sign" v-if="examInfo.duration != -1">
          注：点击开始{{ typeText[type] }}后会系统会自动进行倒计时，且不可中断，请谨慎处理！
        </div>
      </div>
    </card>
  </backContainer>
</template>

<script>
import { getExamPaperInfoApi } from '@/api/ExaminationModule'
import ancestorsNameDeal from '@/components/ancestorsNameDeal'

export default {
  components: {
    ancestorsNameDeal
  },
  props: {},
  data() {
    return {
      loading: true,
      examInfo: {
        title: ''
      },
      typeText: {
        1: '考核',
        3: '练习',
        6: '作业'
      },
      id: '',
      type: 1,
      studyRecordId: ''
    }
  },
  watch: {},
  created() {
    this.type = this.$route.query.type - 0
    this.studyRecordId = this.$route.query.studyRecordId - 0
    this.id = this.$route.query.id - 0
  },
  mounted() {
    this.getExamInfo()
  },
  methods: {
    async getExamInfo() {
      this.loading = true
      try {
        let res = await getExamPaperInfoApi(this.id)
        const { code, data } = res
        if (code == 200) {
          this.examInfo = data
        }
      } catch (e) {
        console.error(e)
      } finally {
        this.loading = false
      }
    },
    startExam() {
      this.$confirm(`是否开始${this.typeText[this.type]}?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$router.replace({
          path: '/answerExam',
          query: {
            type: this.type,
            id: this.id, //考试或者习题id，
            studyRecordId: this.studyRecordId
          }
        })
      })
    }
  }
}
</script>
<style scoped lang="scss">
@import "../../assets/styles/mixin.scss";

::v-deep .back {
  top: 34px !important;
}

.contain {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 94px;
  box-sizing: border-box;

  .title {
    text-align: center;
    font-size: 18px;
    font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
    font-weight: 600;
    color: #333333;
    margin-bottom: 40px;
  }

  .line {
    display: flex;
    align-items: center;
    gap: 0 16px;
    margin-bottom: 24px;

    .label {
      width: 64px;
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 400;
      font-size: 16px;
      color: #999999;
    }

    .value {
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 400;
      font-size: 16px;
      color: #333333;
    }
  }

  .sure_btn {
    margin-top: 40px;
    @include btn_plain(#28B28B, #FFFFFF) {
      width: 295px;
      height: 40px;
      border-radius: 20px;
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 500;
      font-size: 16px;
      color: #FFFFFF;
    }

    &:hover {
      background: #3ac7a0;
    }
  }

  .sign {
    margin-top: 24px;
    font-family: PingFangSC, PingFang SC, sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #EF7D00;
  }
}
</style>
